---
import Button from "../components/landingPage/button.astro";
import LandingPage from "../layouts/landingPage.astro";
---

<LandingPage isNotFound={true}>
  <main>
    <div>
      <div
        class="h-[calc(100vh-200px)] py-12 sm:py-8 md:py-12 lg:py-14 xl:py-12 2xl:py-28"
      >
        <div class="mx-auto max-w-[800px] xl:max-w-7xl">
          <div class="lg:px-8">
            <div class="flex flex-col items-center">
              <div
                class="max-w-md px-4 sm:max-w-2xl sm:px-6 md:max-w-3xl lg:max-w-4xl lg:px-0 xl:max-w-5xl 2xl:max-w-6xl"
              >
                <div class="flex w-full flex-col items-center gap-4">
                  <div class="flex flex-col items-start justify-between">
                    <h1
                      class="text-center text-4xl font-bold tracking-tight text-white sm:text-6xl sm:tracking-tight lg:text-[4rem] xl:text-[6rem] xl:tracking-tight 2xl:text-[6.5rem]"
                    >
                      Page not found...
                      <span class="text-[hsl(200,100%,60%)]"> 404!</span>
                    </h1>
                    <div
                      class="mt-4 flex w-full items-center justify-center gap-4 xl:mt-8"
                    >
                      <Button
                        href="/"
                        openInNewTab={false}
                        rounded="md"
                        className="group"
                        rounded="full"
                        specialHover={true}
                      >
                        Return to the homepage
                        <svg
                          class="stroke -mr-1 ml-2 mt-0.5 h-3 stroke-current stroke-2"
                          fill="none"
                          viewBox="0 0 10 10"
                          aria-hidden="true"
                        >
                          <path
                            class="opacity-0 transition group-hover:opacity-100"
                            d="M0 5h7"></path>
                          <path
                            class="transition group-hover:translate-x-[3px]"
                            d="M1 1l4 4-4 4"></path>
                        </svg>
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</LandingPage>
